
<template>
  <div class="container">
    <title-head1 :title="'各省充电桩占比'"></title-head1>

    <div class="group">
      <div ref="pieChartRef" style="width: 100%;height: 100%"></div>
    </div>
  </div>
</template>
<script setup lang="ts">

import TitleHead1 from "@/components/TitleHead1.vue";

import {ref, onMounted, onBeforeUnmount, nextTick} from 'vue'
import * as echarts from 'echarts'

const pieChartRef = ref(null)
let chartInstance: any = null
let highlightTimer: any = null

// 图表数据
const chartData = ref([
  {value: 12, name: '河北'},
  {value: 8, name: '四川'},
  {value: 4, name: '湖南'},
  {value: 22, name: '浙江'},
  {value: 3, name: '重庆'},
  {value: 2, name: '山东'},
  {value: 49, name: '湖北'},
])

// 颜色映射
const colorMap: any = {
  '河北': '#D45459',
  '四川': '#07F8F8',
  '湖南': '#FEA8AC',
  '浙江': '#FFE355',
  '重庆': '#4579F2',
  '山东': '#FFBF91',
  '湖北': '#0CFFCF'
}

// 初始化图表
const initChart = () => {
  console.log(pieChartRef)

  if (!pieChartRef.value) return

  chartInstance = echarts.init(pieChartRef.value)

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%'
    },
    series: [
      {
        type: 'pie',
        itemStyle: {
          borderWidth: 0,
          borderColor: 'transparent',
          color: (params: any) => colorMap[params.data.name] || '#EE6666' // 添加饼图本体颜色设置
        },
        radius: ['30%', '50%'],
        avoidLabelOverlap: false,
        center: ['50%', '50%'],
        label: {
          show: true,
          formatter: (params: any) => ` ${params.name} {circle|●} \n ${params.percent}%`,
          color: '#fff',
          fontSize: 12,
          rich: {
            circle: {
              color: (params: any) => {
                // 修改参数访问方式
                return colorMap[params.data.name] || '#EE6666'
              },
              padding: [0, 5, 0, 0]
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 35,
          length2: 10
        },
        data: chartData.value
      },
      {
        type: 'pie',
        silent: true,
        radius: ['50%', '60%'],
        label: {show: false},
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {offset: 0, color: 'rgba(0, 173, 181, 0.8)'},
              {offset: 1, color: 'rgba(0, 173, 181, 0.1)'}
            ]
          }
        },
        emphasis: {
          scale: true,
          scaleSize: 10,
          itemStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {offset: 0, color: 'rgba(0, 173, 181, 1)'},
                {offset: 1, color: 'rgba(0, 173, 181, 0.3)'}
              ]
            }
          }
        },
        data: [1]
      }
    ]
  }

  chartInstance.setOption(option)
  startHighlightAnimation()
}

// 启动高亮动画
const startHighlightAnimation = () => {
  let isHighlight = false
  highlightTimer = setInterval(() => {
    isHighlight = !isHighlight
    chartInstance.dispatchAction({
      type: isHighlight ? 'highlight' : 'downplay',
      seriesIndex: 1,
      dataIndex: 0
    })
  }, 700)
}

// 生命周期
onMounted(() => {
  nextTick(initChart)
})

onBeforeUnmount(() => {
  // 清理资源
  if (highlightTimer) clearInterval(highlightTimer)
  if (chartInstance) chartInstance.dispose()
})
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0; /* 设置上下边距 */
}

.group {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #0A1A4C;

}
</style>